<template>

  <el-dialog :title="title" :visible="showDialog" @close="close">
    <el-form ref="addForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item prop="name" label="车辆类型">
        <el-input v-model.number="form.name" placeholder="请输入车辆类型" style="width: 80%" />
      </el-form-item>
      <el-form-item prop="allowableLoad" label="应载重量">
        <el-input v-model.number="form.allowableLoad" placeholder="请输入应载重量" style="width: 80%" />
      </el-form-item>
      <el-form-item prop="allowableVolume" label="应载体积">
        <el-input v-model.number="form.allowableVolume" placeholder="请输入应载体积" style="width: 80%" />
      </el-form-item>
      <el-form-item prop="measureLong" label="长">
        <el-input v-model.number="form.measureLong" placeholder="0.0米" :rows="4" style="width: 80%" />
      </el-form-item>
      <el-form-item prop="measureWidth" label="宽">
        <el-input v-model.number="form.measureWidth" placeholder="0.0米" :rows="4" style="width: 80%" />
      </el-form-item>
      <el-form-item prop="measureHigh" label="高">
        <el-input v-model.number="form.measureHigh" placeholder="0.0米" :rows="4" style="width: 80%" />
      </el-form-item>
      <el-form-item>
        <!-- 按钮 -->
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button size="mini" type="primary" @click="submitForm">确定</el-button>
            <el-button size="mini" @click="close">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addcarTypeList, getcarTypeDetails, updatecarType } from '../../api/carType'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新增车型'
    },
    eadtId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      form: {
        allowableLoad: null, // 重量
        allowableVolume: null, // 体积
        measureHigh: null, // 高
        measureLong: null, // 长
        measureWidth: null, // 宽
        name: ''// 名称
      },
      rules: {
        name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
        allowableLoad: [
          { required: true, message: '内容不能为空' },
          { type: 'number', message: '内容必须为数字值' }
        ],
        allowableVolume: [
          { required: true, message: '内容不能为空' },
          { type: 'number', message: '内容必须为数字值' }
        ],
        measureHigh: [
          { required: true, message: '内容不能为空' },
          { type: 'number', message: '内容必须为数字值' }
        ],
        measureLong: [
          { required: true, message: '内容不能为空' },
          { type: 'number', message: '内容必须为数字值' }
        ],
        measureWidth: [
          { required: true, message: '内容不能为空' },
          { type: 'number', message: '内容必须为数字值' }
        ]

      }
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit('update:showDialog', false)
      this.$refs.addForm.resetFields()
    },
    // 详情数据
    async getDetails() {
      if (this.title === '编辑车型') {
        const res = await getcarTypeDetails(this.eadtId)
        // console.log(res)
        this.form = res.data
      }
    },
    async submitForm() {
      await this.$refs.addForm.validate()
      if (this.title === '编辑车型') {
        await updatecarType(this.eadtId, this.form)
        this.$message.success('更新车辆类型成功')
      } else {
        await addcarTypeList(this.form)
        this.$message.success('添加车辆类型成功')
      }

      // 通知父组件更新
      this.$emit('updateCarType')
      this.close()
    }
  }

}
</script>

<style>

</style>
